<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>

<link rel="stylesheet" href="__ADDONROOT__/style/UploadImages.css">
    <input type="file" id="upload_picture_{$name}">
    <input type="hidden" name="{$name}" value="{$valStr}" class="icon {$name}" />
    <div class="upload-img-box">
        <notempty name="valArr">
             <volist name="valArr" id="v">
                <div class="upload-pre-item">
                    <img src="__ROOT__{$v|get_cover='path'}" data-id="{$v}" data-src="{$v|get_cover='path'}"/>
                    <span class='btn-close btn-close-{$name}' title='刪除圖片'></span>
                </div>
             </volist>
        </notempty>
    </div>
<script type="text/javascript">
    //上傳圖片
    $(function(){
        /* 初始化上傳插件*/
        $("#upload_picture_{$name}").uploadify({
            "height"          : 30,
            "swf"             : "__STATIC__/uploadify/uploadify.swf",
            "fileObjName"     : "download",
            "buttonText"      : "上傳圖片",
            "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
            "width"           : 120,
            'removeTimeout'   : 1,
            'fileTypeExts'    : '*.jpg; *.png; *.gif;',
            "onUploadSuccess" : uploadPicture{$name},
            'onFallback' : function() {
                alert('未檢測到兼容版本的Flash.');
            }
        });
        $(document).on("click",'.btn-close-{$name}',function(event) {
            event.preventDefault();
            var src =  $(this).siblings('img').attr('data-src');
            var id  =  $(this).siblings('img').attr('data-id'); 
            $.post("{:U('File/removePicture')}",{path:src,id:id},function(){
                return true;
            })
            $(this).parent().remove();
            picsbox = $("#upload_picture_{$name}").siblings('.upload-img-box');
            picArr = [];
            for (var i = 0; i < picsbox.children().length ; i++) {
                picArr.push(picsbox.children('.upload-pre-item:eq('+i+')').find('img').attr('data-id'));
            };
            picStr = picArr.join(',');
            $('.icon.{$name}').val(picStr);
        });
    })
    function uploadPicture{$name}(file, data){
        var data = $.parseJSON(data);
        var src = '';
        if(data.status){
            src = data.url || '__ROOT__' + data.path;
            upload_img = "<div class='upload-pre-item'><img data-src="+data.path+" src=" + src +" title='點擊顯示大圖' data-id="+data.id+"> <span class='btn-close btn-close-{$name}' title='刪除圖片'></span></div>";
            picsbox = $("#upload_picture_{$name}").siblings('.upload-img-box');
            picsbox.append(upload_img)
            picArr = [];
            for (var i = 0; i < picsbox.children().length ; i++) {
                picArr.push(picsbox.children('.upload-pre-item:eq('+i+')').find('img').attr('data-id'));
            };
            picStr = picArr.join(',');
            $('.icon.{$name}').val(picStr);
        } else {
            updateAlert(data.info);
            setTimeout(function(){
                $('#top-alert').find('button').click();
                $(that).removeClass('disabled').prop('disabled',false);
            },1500);
        }
    }
</script>